<script setup lang="ts">
import SvgIcon from '@/components/icon/SvgIcon.vue'
import { inject } from 'vue'
const userInfoActive = inject('userInfoActive')
</script>

<template>
  <div class="panel">
    <section>
      <p @click="() => (userInfoActive = !userInfoActive)">
        <svg-icon size="15" color="#000" name="left" />
        <span>个人详情</span>
      </p>
      <p>
        <el-avatar
          class="avatar"
          :size="60"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        />
      </p>
      <el-divider style="margin: 10px 0" />
    </section>

    <section>
      <p>
        <span>用户名</span>
        <span>
          <span>江寻月</span>
          <svg-icon size="15" color="black" name="right" />
        </span>
      </p>

      <p>
        <span>密码</span>
        <span>
          <span>*******</span>
          <svg-icon size="15" color="black" name="right" />
        </span>
      </p>

      <p>
        <span>邮箱</span>
        <span>
          <span>1655447052@qq.com</span>
          <svg-icon size="15" color="black" name="right" />
        </span>
      </p>

      <el-divider style="margin: 10px 0" />
    </section>

    <section>
      <el-button size="small" type="primary">退出登录</el-button>
      <el-button size="small" type="danger">删除账号</el-button>
    </section>
  </div>
</template>

<style scoped lang="less">
.panel {
  width: 100%;
  padding-left: 5px;
  background-color: white;

  section:first-of-type {
    .avatar {
      cursor: pointer;
    }
    p:first-of-type {
      margin-top: @marginTop;
      display: flex;
      justify-items: center;
      svg {
        margin-right: 10px;
      }
    }

    p:first-of-type:hover {
      cursor: pointer;
    }

    p:nth-of-type(2) {
      display: flex;
      justify-items: center;
      justify-content: center;
    }
  }

  section:nth-of-type(2) {
    P {
      display: flex;
      justify-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding: 5px 0 5px 0;

      span:nth-of-type(2) {
        display: flex;
        svg {
          margin-left: @marginLeft;
          margin-right: 10px;
        }
      }
    }
    P:hover {
      cursor: pointer;
    }
  }

  section:nth-of-type(3) {
    display: flex;
    justify-content: center;
  }
}
</style>
